<template>
    <footer class="footer">
        <span class="todo-count">剩余<strong>{{this.list.length}}</strong></span>
        <ul class="filters">
        <li>
            <a @click="classToggle('all')" :class="{'selected':this.flag=='all'}" href="javascript:;" >全部</a>
        </li>
        <li>
            <a  @click="classToggle('unfinished')" :class="{'selected':this.flag=='unfinished'}" href="javascript:;">未完成</a>
        </li>
        <li>
            <a  @click="classToggle('finished')" :class="{'selected':this.flag=='finished'}" href="javascript:;" >已完成</a>
        </li>
        </ul>
        <button class="clear-completed" @click="removeAll">清除已完成</button>
    </footer>
</template>

<script>
export default {
data(){
    return{
        flag:"all",
        arr:this.list
    }
},
props:["list"],
methods:{
    classToggle(val){
        this.flag=val
        this.$emit("flooter",this.flag)
    },
    removeAll(){
        this.$emit('clear')
    }
}
}
</script>